import React from 'react';
import { Tabs } from 'antd';
import ChatInterface from './components/ChatInterface';
import KnowledgeManagement from './components/KnowledgeManagement';
import './App.css';

const App: React.FC = () => {
  const items = [
    { 
      key: '1', 
      label: '🔍 知识检索', 
      children: <ChatInterface /> 
    },
    { 
      key: '2', 
      label: '📚 知识库管理', 
      children: <KnowledgeManagement /> 
    },
  ];

  return (
    <div className="app-container">
      <div className="header">
        <div className="header-content">
          <h1 className="app-title">个人知识库系统</h1>
          <p className="app-subtitle">智能文档检索与知识管理平台</p>
        </div>
      </div>
      
      <div className="main-content">
        <div className="tabs-container">
          <Tabs 
            defaultActiveKey="1" 
            items={items}
            size="large"
            tabBarStyle={{
              marginBottom: 0,
              borderBottom: 'none'
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default App;
